<template>
    <div class="mine_container">
        <div></div>

        <div class="main">
            <div class="person_div">
                <div class="person_img">
                    <el-avatar :size="50" :src="circleUrl"></el-avatar>
                </div>
                <div class="person_mes"  @click="readCard()">
                    <span>{{name}}</span>
                    <span>{{userInfo.bdId}}</span>
                </div>
            </div>

            <div class="bdparam_div">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>北斗参数</span>
                    </div>
                    <el-form ref="bdform" :model="userInfo" size="mini" label-position="left">

                        <el-form-item label="卡号">
                            <el-input v-model="userInfo.bdId" placeholder="本机卡号，不可设置" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="等级">
                            <el-input v-model="userInfo.level" placeholder="本机北斗等级，不可设置" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="频度">
                            <el-input v-model="userInfo.period" placeholder="本机北斗频度，不可设置" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="频点">
                            <el-select v-model="bdform.bdFrePoint" placeholder="请选择频点" style="width:80%;">
                                <el-option :label="LF0" value="1">LF0</el-option>
                                <el-option :label="LF1" value="2">LF1</el-option>
                                <el-option :label="LF2" value="3">LF2</el-option>
                                <el-option :label="LF3" value="4">LF3</el-option>
                                <el-option :label="LF4" value="5">LF4</el-option>
                                <el-option :label="LF5" value="6">LF5</el-option>
                            </el-select>
                        </el-form-item>

                    </el-form>
                </el-card>
            </div>

            <div class="bdparam_div">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>指挥机设置</span>
                    </div>
                    <el-form ref="bdform" :model="bdform" size="mini" label-position="left">

                        <el-form-item label="卡号">
                            <el-input v-model="bdform.bdDirNum" placeholder="请输入指挥机卡号"></el-input>
                        </el-form-item>

                    </el-form>
                </el-card>
            </div>

            <!--<div class="bdparam_div">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>载体参数</span>
                    </div>
                    <el-form ref="equMes" :model="equMes" size="mini" label-position="left">
                        <el-form-item label="类型">
&lt;!&ndash;                            <el-input v-model="carrierType" readonly></el-input>&ndash;&gt;
                            <el-radio-group v-model="carrierType">
                                <el-radio label="手持设备" value="手持设备"></el-radio>
                                <el-radio label="车载设备" value="车载设备"></el-radio>
                            </el-radio-group>
                        </el-form-item>
&lt;!&ndash;                        <el-form-item label="位置">&ndash;&gt;
&lt;!&ndash;                            <el-col :span="9">&ndash;&gt;
&lt;!&ndash;                                <el-input placeholder="经度" v-model="coorObj.longitude" style="width: 100%;"></el-input>&ndash;&gt;
&lt;!&ndash;                            </el-col>&ndash;&gt;
&lt;!&ndash;                            <el-col class="line" :span="1">-</el-col>&ndash;&gt;
&lt;!&ndash;                            <el-col :span="9">&ndash;&gt;
&lt;!&ndash;                                <el-input placeholder="纬度" v-model="coorObj.latitude" style="width: 100%;"></el-input>&ndash;&gt;
&lt;!&ndash;                            </el-col>&ndash;&gt;
&lt;!&ndash;                        </el-form-item>&ndash;&gt;
                        <el-form-item label="高度">
                            <el-input v-model="equMes.equHigh"></el-input>
                        </el-form-item>
                        <el-form-item label="宽度">
                            <el-input v-model="equMes.equWidth"></el-input>
                        </el-form-item>
                        <el-form-item label="重量">
                            <el-input v-model="equMes.equWeigh"></el-input>
                        </el-form-item>

                    </el-form>

                </el-card>
            </div>-->

            <div class="bdparam_div">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>位置上报</span>
                    </div>
                    <el-form ref="bdform" :model="bdform" size="mini" label-position="left">

                        <el-form-item label="连续">
                            <el-radio-group v-model="bdform.bdTimes">
                                <el-radio :label="0" >不上报</el-radio>
                                <el-radio :label="1">连续上报</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="频率">
                            <el-input v-model="bdform.locFreq"></el-input>
                        </el-form-item>

                    </el-form>
                </el-card>
            </div>

            <div class="logout_div">
        </div>

    </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                circleUrl: require("../../assets/login/portrait.png"),
                name: sessionStorage.getItem('bdname'),
                bdid: sessionStorage.getItem('bdid'),
                bdform: {
                    bdFrePoint: 2,
                    locFreq: 60,
                    bdTimes: '连续上报',//单次/连续
                    bdDirNum:"",//指挥机卡号
                },
                userInfo: {
                    bdId: '',
                    period: '',
                    level: '',

                },
                equMes: {
                    carrierType: sessionStorage.getItem('carrtype'),
                    equHigh: 0,
                    equWeigh: 0,
                    equWidth: 0,
                },
                coorWatchId:null,
                coorObj: {longitude: '118', latitude: '32'},
                defaultLoc: 1
            }
        },
        methods: {
            setCarrierParam() {

            },

            initBdParam(){
                let res = $App.getBdParams();
                let param = JSON.parse(res);
                // this.bdform.bdFrePoint = param.bdFrePoint;
                this.bdform.locFreq = param.locFreq;
                // this.bdform.bdTimes = param.bdTimes === 1 ? "连续上报" : "不上报";
                this.bdform.bdTimes = param.bdTimes;
                this.bdform.bdDirNum = param.bdDirNum;

                switch(param.bdFrePoint){
                    case 1:
                        this.bdform.bdFrePoint = "LF0";
                        break;
                    case 2:
                        this.bdform.bdFrePoint = "LF1";
                        break;
                    case 3:
                        this.bdform.bdFrePoint = "LF2";
                        break;
                    case 4:
                        this.bdform.bdFrePoint = "LF3";
                        break;
                    case 5:
                        this.bdform.bdFrePoint = "LF4";
                        break;
                    case 6:
                        this.bdform.bdFrePoint = "LF5";
                        break;
                }

                let userInfo = $App.getUserInfo();
                let user = JSON.parse(userInfo);
                this.userInfo.bdId = user.userid;
                this.userInfo.period = user.period;
                this.userInfo.level = user.level;
            },

            listenSerial(dt){
                //监听串口读卡信息，刷新列表
                // this.$message({
                //   message: "读卡成功",
                //   type: "success"
                // });
                this.bdid = dt;
                // console.log("88888888888888888888");
            },

            readCard(){
                let res = $App.readCard();
            }
        },
        mounted() {
            if(navigator){
                this.coorWatchId = navigator.geolocation.watchPosition(pos=>{
                    this.coorObj.longitude = pos.longitude;
                    this.coorObj.latitude = pos.latitude;
                },err=>{
                    console.warn(err)
                },{
                    enableHighAccuracy:true,
                    timeout:5000,
                    maximumAge:0
                })
            }

            this.initBdParam()
            window.updateSIM = this.listenSerial;


        },

        computed: {
            carrierType() {
                let typeStr = sessionStorage.getItem('carrtype');
                return typeStr == 1 ? "手持设备" : "车载设备"
            },

        },
        watch: {
            // equMes: {
            //     handler(newValue, oldValue) {
            //         this.$systemMes.carrierWeight = this.equMes.equWeigh;
            //         this.$systemMes.carrierWidth = this.equMes.equWidth;
            //         this.$systemMes.carrierHeight = this.equMes.equHigh;
            //         console.log(this.$systemMes.carrierHeight);
            //     },
            //     deep: true
            // },
            bdform: {
                handler(newValue, oldValue) {
                    // this.$systemMes.bdStyle = this.bdform.bdstyle;
                    // this.$systemMes.bdFrequecy = this.bdform.frequency;
                    // this.$systemMes.bdFrePoint = this.bdform.frepoint;
                    // this.$systemMes.isContinuous = this.bdform.times;
                    // this.$systemMes.bdDirNum = this.bdform.dirBdNum;
                    // console.log("北斗参数："+JSON.stringify(this.bdform));

                    let bdform2 = {
                        bdFrePoint: this.bdform.bdFrePoint,
                            locFreq: this.bdform.locFreq,
                        // bdTimes: this.bdform.bdTimes=== '连续上报' ?  1: 0, //单次/连续
                        bdTimes: this.bdform.bdTimes, //单次/连续
                        bdDirNum:this.bdform.bdDirNum,//指挥机卡号
                    };

                    switch(this.bdform.bdFrePoint){
                        case "LF0":
                            bdform2.bdFrePoint = 1;
                            break;
                        case "LF1":
                            bdform2.bdFrePoint = 2;
                            break;
                        case "LF2":
                            bdform2.bdFrePoint = 3;
                            break;
                        case "LF3":
                            bdform2.bdFrePoint = 4;
                            break;
                        case "LF4":
                            bdform2.bdFrePoint = 5;
                            break;
                        case "LF5":
                            bdform2.bdFrePoint = 6;
                            break;
                    }

                    switch(this.bdform.bdFrePoint){
                        case "1":
                            this.bdform.bdFrePoint = "LF0";
                            break;
                        case "2":
                            this.bdform.bdFrePoint = "LF1";
                            break;
                        case "3":
                            this.bdform.bdFrePoint = "LF2";
                            break;
                        case "4":
                            this.bdform.bdFrePoint = "LF3";
                            break;
                        case "5":
                            this.bdform.bdFrePoint = "LF4";
                            break;
                        case "6":
                            this.bdform.bdFrePoint = "LF5";
                            break;
                    }

                    // let bdform2 = this.bdform;
                    // bdform2.bdTimes = bdform2.bdTimes=== '连续上报' ?  1: 0;

                    $App.saveBdParams(JSON.stringify(bdform2));
                },
                deep: true
            },

        },
        beforeDestroy() {
        }
    }
</script>

<style scoped>
    .mine_container {
        /*height: 100%;*/
        flex:1;
        display: flex;
        flex-direction: column;
        background: #f5f5f5;
        /*color: white;*/
    }
    .mine_container>div:first-child{
        background-color: #03192b;
        height: 50px;
        width: 100%;
        position:absolute;
    }
    .main{
        display: flex;
        flex-direction: column;
        overflow: auto;
        padding:0 10px;
        position:relative;
        top:25px;
    }
    .main>div:nth-child(2){
        margin-top: 10px;
    }

    .person_div {
        display: flex;
        flex-direction: row;
        padding: 10px;
        /*background-color: #0a3165;*/
        background-color: white;
        border-radius: 10px;
    }

    .person_mes {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 20px;

    }

    .person_mes > span {
        display: block;
    }

    .person_mes > span:first-child {
        font-size: 18px;
        font-weight: bold;
        color:#03192b;
    }

    .person_mes > span:last-child {
        font-size: 16px;
        color: #2a2a2a;
        margin-top: 5px;
    }


    .bdparam_div {
        /*flex: 1;*/

    }

    .logout_div {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 30px;
    }

    /deep/ .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
        margin-bottom: 10px;

    }

    /deep/ .el-form-item__label {
        color: #333;
    }

    .el-radio {
        color: #333;
    }

    .el-card {
        /*background-color: #0a3165;*/
        background-color: white;
        border: none;
        box-shadow: 0 0 0;
    }

    /deep/ .el-card__header {
        padding: 5px 20px;
        color: #03192b;
        font-weight: bold;
    }

    /deep/ .el-card__body {
        padding: 10px;
        color: white;
    }

    .el-input {
        width: 80%;
    }

    /deep/ .el-input__inner {
        background-color: #eee;
        border-radius: 5px;
    }

    /deep/ .el-select-dropdown {
        /*background-color: #0f4874 !important;*/
    }
    .line{
        color: grey;
        text-align: center;
    }
</style>